<template>
	<header class="header">
		<div class="app-header-left">
			<a @click="back">
				<i class="back"></i>
			</a>
		</div>
		<div class="app-header-item">
			<p v-text="title[i]"></p>
		</div>
		<div class="app-header-right">
			<a @click="back">
				<i class="zoom"></i>
			</a>
		</div>
	</header>
</template>

<script type="text/ecmascript-6">
    export default {
        name: "Title",
        data(){
            return {
                title: ["分类", "购物车", "用户结算", "收货地址", "新增地址", "订单详情","我的订单","个人中心"],
            }
        },
        computed: {
            i(){
                let i = 0;
                if(this.$route.path === "/cart"){
                    i = 1
                }else if(this.$route.path === "/category"){
                    i = 0;
                }else if(this.$route.path === "/order"){
                    i = 2;
                }else if(this.$route.path === "/addressed"){
                    i = 3;
                }else if(this.$route.path === "/addsite"){
                    i = 4;
                }else if(this.$route.path === "/order/detail"){
                    i = 5;
                }else if(this.$route.path === "/order/list"){
                    i = 6;
                }else if(this.$route.path === "/profile/set"){
                    i = 7;
                }
                return i
            }
        },
        methods: {
            back(){//返回上一页
                if(this.i === 5){
					this.$router.push({path:"/"})
                }else{
                    this.$router.back(-1)
                }
            }
        },
    }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
	$back = ""
	$zoom = ""
	.header
		position fixed
		height .9rem
		width 100%
		background #f2f2f2
		color #666
		display flex
		align-items center
		z-index 9999
		.app-header-left
			flex-shrink 0
			a
				display block
				margin 0 .2rem
				width 0.6rem
			a > .back
				display block
				width .45rem
				height .45rem
				margin 0 auto
				background-image url($back)
				background-position center center
				background-size cover
				background-repeat no-repeat
		.app-header-item
			flex-grow 1
			p
				text-align center
				font-size 0.30rem
		.app-header-right
			flex-shrink 0
			a
				display block
				margin 0 .2rem
				width 0.6rem
				.zoom
					display block
					width .52rem
					height .52rem
					margin 0 auto
					background-image url($zoom)
					background-position center center
					background-size cover
					background-repeat no-repeat
</style>